<template>
  <div class="app-container">
    <!-- 查询表单 -->
    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
      <el-form-item label="资产编号">
        <el-input v-model="listQuery.zcNumber" placeholder="请输入资产编号" clearable />
      </el-form-item>
      <el-form-item label="资产名称">
        <el-input v-model="listQuery.zcName" placeholder="请输入资产名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleFilter">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 资产表格（添加滚动配置） -->
    <div class="table-container">
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        max-height="calc(100vh - 160px)"
        :header-cell-style="handleHeaderCellStyle"
      >
        <el-table-column label="序号" type="index" width="50" align="center" />
        <el-table-column label="合同编号" prop="contraceNumber" align="center" min-width="120" />
        <el-table-column label="类别" prop="zcType" align="center" min-width="120" />
        <el-table-column label="资产名称" prop="zcName" align="center" min-width="150" />
        <el-table-column label="资产编号" prop="zcNumber" align="center" min-width="120" />
        <el-table-column label="权证单位" prop="warrantUnit" align="center" min-width="120" />
        <el-table-column label="取得日期" prop="acquiringDate" align="center" min-width="120" />
        <el-table-column label="坐落位置" prop="address" align="center" min-width="150" />
        <el-table-column label="承租人" prop="chengzuren" align="center" min-width="150" />
        <el-table-column label="承租地址" prop="chengzhudizhi" align="center" min-width="150" />
        <el-table-column label="资产价值" prop="acquiringValue" align="center" min-width="150" />
        <el-table-column label="建筑面积(平方米)" prop="buildingArea" align="center" min-width="120" />
        <el-table-column label="起租时间" prop="startTime" align="center" min-width="120" />
        <el-table-column label="止租时间" prop="endTime" align="center" min-width="120" />
        <el-table-column label="月租金" prop="monthlyRent" align="center" min-width="120" />
        <el-table-column label="保证金" prop="earnestMoney" align="center" min-width="120" />
        <el-table-column label="税率" prop="sl" align="center" min-width="120" />

        <!-- 应收账款 双层表头 -->
        <el-table-column label="应收账款" align="center" min-width="200">
          <el-table-column label="期初余额" prop="ysQiChuYue" align="center" />
          <el-table-column label="本期增加" prop="yuSBenQiZengJia" align="center" />
        </el-table-column>

        <!-- 预收账款 双层表头 -->
        <el-table-column label="预收账款" align="center" min-width="200">
          <el-table-column label="期初余额" prop="preReceivablesInitial" align="center" />
          <el-table-column label="本期增加" prop="preReceivablesAdd" align="center" />
        </el-table-column>

        <el-table-column label="结转额" prop="carryOverAmount" align="center" min-width="120" />

        <!-- 余额 双层表头 -->
        <el-table-column label="余额" align="center" min-width="200">
          <el-table-column label="应收账款" prop="balanceReceivables" align="center" />
          <el-table-column label="预收账款" prop="balancePreReceivables" align="center" />
        </el-table-column>

        <el-table-column label="备注" prop="remark" align="center" min-width="150" />
      </el-table>
    </div>

<!--    &lt;!&ndash; 分页组件 &ndash;&gt;-->
<!--    <el-pagination-->
<!--      @size-change="handleSizeChange"-->
<!--      @current-change="handleCurrentChange"-->
<!--      :current-page="listQuery.currentPage"-->
<!--      :page-sizes="[10, 20, 30, 50]"-->
<!--      :page-size="listQuery.pageSize"-->
<!--      layout="total, sizes, prev, pager, next, jumper"-->
<!--      :total="total"-->
<!--      style="margin-top: 20px;"-->
<!--    >-->
<!--    </el-pagination>-->
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'zcglInfoReport',
  data() {
    return {
      list: [], // 表格数据
      total: 0, // 总条数
      listLoading: false, // 加载状态
      listQuery: {
        currentPage: 1, // 当前页
        pageSize: 20, // 每页条数
        zcNumber: undefined, // 资产编号查询条件
        zcName: undefined, // 资产名称查询条件
        keyword: '', // 通用关键词查询
        dataType: 0, // 数据类型
        menuId: '' // 菜单ID
      },
      expandObj: {} // 扩展数据对象
    }
  },
  created() {
    this.listQuery.menuId = this.$route.query.menuId || ''
    this.initData()
  },
  methods: {
    /**
     * 加载表格数据
     */
    initData() {
      this.listLoading = true
      const queryParams = {
        ...this.listQuery,
        offset: (this.listQuery.currentPage - 1) * this.listQuery.pageSize
      }

      request({
        url: `/api/example/ZcglZcdjInfo/zcReportYs`,
        method: 'post',
        data: queryParams
      }).then(res => {
        if (res.code === 200 && res.data) {
          this.list = res.data.list.map(item => ({ ...item, ...this.expandObj }))
          this.total = res.data.pagination ? res.data.pagination.total : 0
        } else {
          this.list = []
          this.total = 0
          this.$message.warning('获取数据失败')
        }
        this.listLoading = false
      }).catch(error => {
        console.error('数据请求失败:', error)
        this.list = []
        this.total = 0
        this.listLoading = false
        this.$message.error('网络异常，请重试')
      })
    },

    handleFilter() {
      this.listQuery.currentPage = 1
      this.initData()
    },

    resetQuery() {
      this.listQuery = {
        ...this.listQuery,
        currentPage: 1,
        pageSize: 20,
        zcNumber: undefined,
        zcName: undefined,
        keyword: '',
        dataType: 0
      }
      this.initData()
    },

    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.listQuery.currentPage = 1
      this.initData()
    },

    handleCurrentChange(val) {
      this.listQuery.currentPage = val
      this.initData()
    },

    /**
     * 控制表头单元格样式（背景色等）
     * @param {Object} column 列信息
     * @returns {Object} 样式对象
     */
    handleHeaderCellStyle({ column }) {
      // 给“应收账款”“预收账款”“余额”等双层表头的外层列加特定标记，方便统一改色（也可直接写死颜色）
      const targetLabels = ['应收账款', '预收账款', '余额']
      if (targetLabels.includes(column.label)) {
        return {
          'background-color': '#00ccff', // 示例蓝色，根据实际设计稿调整
          'color': '#333',
          'font-weight': 'bold'
        }
      }
      // 普通表头背景色
      return {
        'background-color': '#99CCFF',
        'color': '#333',
        'font-weight': 'bold'
      }
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
  box-sizing: border-box; /* 确保padding不会撑开容器 */
}

.demo-form-inline {
  margin-bottom: 20px;
}

/* 表格容器样式 */
.table-container {
  width: 100%;
  overflow: auto; /* 当表格宽度超出容器时显示横向滚动条 */
  margin-top: 20px;
  border: 1px solid #59d2e5; /* 边框与表格呼应 */
  border-radius: 4px; /* 轻微圆角 */
}

/* 解决表格内容过长导致的显示问题 */
::v-deep .el-table th > .cell {
  white-space: nowrap; /* 表头不换行 */
}

::v-deep .el-table td > .cell {
  white-space: normal; /* 单元格内容自动换行 */
  word-break: break-all; /* 单词截断 */
  line-height: 1.5; /* 行高适中 */
}
</style>
